<template>
  <!-- 操作 -->
  <a-card :bordered="false">
    <a-table
      :columns="columns"
      :dataSource="rateList"
      :pagination="false"
      :loading="loading"
      rowKey="id"
    >
      <template slot="chargeType" slot-scope="chargeTypeTxt">
        <span>{{ chargeTypeTxt | chargeTypeFilter }}</span>
      </template>
      <template slot="sysStatus" slot-scope="sysStatusTxt">
        <span>{{ sysStatusTxt | sysStatusFilter }}</span>
      </template>
      <template slot="status" slot-scope="statusTxt">
        <span>{{ statusTxt | statusFilter }}</span>
      </template>
      <template slot="isActive" slot-scope="status">
        <a-switch checkedChildren="启用" unCheckedChildren="关闭" :checked="status==0 ? true : false" />
      </template>
    </a-table>
  </a-card>
</template>

<script>
import { mixinDevice } from '@/utils/mixin.js'
import { getRateList } from '@/api/api'
import Dict from '@/config/dict.conf'

export default {
  name: 'RateQuery',
  mixins: [mixinDevice],
  data() {
    return {
      columns: [
        {
          title: '通道ID',
          dataIndex: 'id',
          key: 'id'
        },
        {
          title: '通道类型',
          dataIndex: 'chargeType',
          key: 'chargeType',
          scopedSlots: { customRender: 'chargeType' }
        },
        {
          title: '提成比例',
          dataIndex: 'royaltyRatio',
          key: 'royaltyRatio',
          customRender: text => text + ' %'
        },
        {
          title: '系统状态',
          dataIndex: 'sysStatus',
          scopedSlots: { customRender: 'sysStatus' },
          key: 'sysStatus'
        },
        {
          title: '用户状态',
          dataIndex: 'status',
          scopedSlots: { customRender: 'status' },
          key: 'status'
        },
        {
          title: '启用状态',
          dataIndex: 'isActive',
          key: 'isActive',
          scopedSlots: { customRender: 'isActive' }
        }
      ],

      loading: false,
      rateList: []
    }
  },
  filters: {
    /**
     * 支付通道转换过滤
     */
    chargeTypeFilter(chargeType) {
      let chargeTypeList = Dict.payWayList || []
      let txt = ''
      for (let c in chargeTypeList) {
        let ct = chargeTypeList[c]
        if (ct.val == chargeType) {
          txt = ct.name
          break
        }
      }
      return txt
    },

    sysStatusFilter(status) {
      const statusMap = {
        '0': '正常',
        '1': '停用'
      }
      return statusMap[status]
    },

    statusFilter(status) {
      const statusMap = {
        '0': '正常',
        '1': '停用'
      }
      return statusMap[status]
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      this.loading = true
      getRateList()
        .then(res => {
          this.loading = false
          console.log(res)
          const { data } = res
          this.rateList = data || []
        })
        .catch(err => {
          console.log(err)
          this.loading = true
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.detail-layout {
  margin-left: 44px;
}
.text {
  color: rgba(0, 0, 0, 0.45);
}

.heading {
  color: rgba(0, 0, 0, 0.85);
  font-size: 20px;
}

.no-data {
  color: rgba(0, 0, 0, 0.25);
  text-align: center;
  line-height: 64px;
  font-size: 16px;

  i {
    font-size: 24px;
    margin-right: 16px;
    position: relative;
    top: 3px;
  }
}

.mobile {
  .detail-layout {
    margin-left: unset;
  }
  .text {
  }
  .status-list {
    text-align: left;
  }
}
</style>
